<template>
  <div class="articles">
      <ul ref="list">
          <li v-for="a in articles" :key="a.id">{{a.text}}</li>
      </ul>
  </div>
</template>

<script>

export default {
    data(){
        return{
            articles:[]
        }
    },
    created(){
        this.getArticles()
    },
    mounted(){
        window.onscroll =()=>{
            let screenH =document.documentElement.clientHeight;
            let scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            let listH=this.$refs.list.clientHeight;
            console.log(screenH,scrollTop,listH);
            if(screenH+scrollTop-16>=listH){
                console.log('触底了')
            }
        }
    },
    methods:{
        getArticles(){
            for(let i=0;i<10;i++){
                this.articles.push({
                    id:Math.random(),
                    text:`文章列表${i}`
                })
            }
        }
    }
}
</script>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        list-style: none;
        width: 100%;
    }
    ul li{
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
    }
</style>